<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CXK RUN!</title>
  </head>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #c0c0c0;
      height: 300px;
      text-align: center;
    }
    .main {
      padding: 30px 0 50px;
      color: #000;
      font-size: 20px;
      font-weight: bold;
      background: url('./imgs/4ef4ea889e510fb37f3572fcd733c895d1430c63.gif');
      background-size: 10% 25%;
    }
    .title {
      margin: 30px auto 0;
      font-size: 40px;
    }
    p {
      margin: 25px auto;
      width: 800px;
      font-size: 22px;
    }
    ul {
      margin: 0 auto;
      padding: 0;
      width: 500px;
      font-size: 20px;
      text-align: left;
      list-style: none;
    }
    ul li:first-child {
      margin-bottom: 18px;
      font-size: 26px;
      color: red;
    }

    .star {
      margin: 30px auto;
      color:red;
    }
  </style>
  <body>
    <div class="main">
      <div id="beforeInfo">
        首次加载较慢，请等待。。。。
      </div>
      <canvas id="cxk" width="667" height="375"></canvas>
    </div>
    <div class="title">-鸡你快跑-</div>
    <p>
      原本想做成微信小游戏，但是由于微信审核机制的原因，导致无法上线，先已改为pc游戏，排行榜功能无法使用。以demo的形式博君一笑。<span style="display: block;color: slateblue"
        >(请使用最新版本的chrome打开)</span
      >
    </p>
    <ul>
      <li>--------------- 操作tips：--------------</li>
      <li>1. 点击<b> C键 </b>可进行跳跃</li>
      <li>2. 长按<b> C键 </b>可跳的更高</li>
      <li>3. 在空中按<b> C键 </b>可释放虚鲲龙卷，滑行一段距离</li>
    </ul>
    <div class="star">
      喜欢的话点个star吧 →
      <iframe
        style="margin-left: 2px; margin-bottom:-5px;"
        frameborder="0"
        scrolling="0"
        width="91px"
        height="20px"
        src="https://ghbtns.com/github-btn.html?user=betterTisen&repo=cxkH5&type=star&count=true"
      >
      </iframe>
    </div>
  </body>
  <script type="module" src="./src/game.js"></script>
</html>
